<style lang="scss" scope>
  .ui-page {
    padding-bottom: 20px;

    .ui-list {
      min-height: 300px;
      margin-bottom: 30px;

      .ui-detail-box {
        justify-content: space-around;
        flex-wrap: wrap;
        padding: 40px 60px;

        .func_item {
          width: 130px;
          height: 120px;
          padding-top: 20px;
          color: #304156;
          font-weight: bold;
          transition: all 0.6s;
          border-radius: 5px;
          cursor: pointer;

          .box_icon {
            font-size: 50px;

          }
        }

        .func_item:hover {
          background-color: #304156;
          color: #E1E2E7;
          transform: translate(0, -10px);
        }

      }
    }

    .reward_status {
      padding: 2px;
      border-radius: 3px;
      color: #67C23A;
    }

    .leave {
      justify-content: space-between;

    }

    .leave_dialog {
      box-sizing: border-box;
      padding: 0 20px;

      .left_form {
        color: black;

        .leave_item_reset {
          width: 220px;
        }
      }
    }
  }

  .ui-list-header {
    padding: 0 20px;
  }

  .echart_punch {
    width: 400px;
    height: 400px;
  }
</style>
<template>
  <div class="ui-page">
    <div class="ui-list ui-box">
      <div class="box-header ui-list-header">
        <div>常用功能</div>
      </div>
      <div class="item_row ui-detail-box">
        <div class="item_column func_item" @click="openRepair">
          <i class="el-icon-circle-plus box_icon"></i>
          添加报修
        </div>
        <div class="item_column func_item" @click="openDs">
          <i class="el-icon-circle-plus box_icon"></i>
          添加宿舍服务信息
        </div>
        <div class="item_column func_item" @click="toDiv('#person_box')">
          <i class="el-icon-user-solid box_icon"></i>
          个人信息
        </div>
      </div>
    </div>
    <div class="ui-list ui-box" slot="list-box" id="person_box">
      <div class="box-header ui-list-header">
        <div>个人信息</div>
        <div>
          <el-button type="primary" size="mini" @click="openChangePassword">修改密码</el-button>
        </div>
      </div>
      <el-table :data="adminList" :cell-style="cellStyle"
                :header-cell-style="rowClass" v-loading="tabLoading">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="adminNo" label="管理员工号"></el-table-column>
        <el-table-column prop="adminName" label="姓名"></el-table-column>
        <el-table-column prop="adminAge" label="年龄"></el-table-column>
        <el-table-column prop="adminSex" label="性别">
          <template v-if="scope.row.adminSex!=null" slot-scope="scope">
            <span v-if="scope.row.adminSex===1">男</span>
            <span v-else>女</span>
          </template>
        </el-table-column>
        <el-table-column prop="adminPosition" label="职位"></el-table-column>
        <el-table-column prop="adminPhone" label="手机"></el-table-column>
        <el-table-column prop="buildingNo" label="宿舍楼"></el-table-column>
        <el-table-column prop="dorNo" label="宿舍号"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-check" circle size="mini" v-if="scope.row.status===1"></el-button>
            <el-button type="danger" icon="el-icon-close" circle v-else size="mini"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="checkDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="ui-list ui-box" id="repair_box">
      <div class="box-header ui-list-header">
        <div>报修情况</div>
        <div>
          <el-button type="primary" size="mini" @click="exportRepairExcel">导出</el-button>
        </div>
      </div>
      <el-table :data="repairList" :cell-style="cellStyle" @selection-change="handleSelectionChange1"
                :header-cell-style="rowClass" v-loading="tabLoading" >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="repairId" label="报修单号"></el-table-column>
        <el-table-column prop="repairKind" label="报修种类">
          <template v-if="scope.row.repairKind!=null" slot-scope="scope">
            <span v-if="scope.row.repairKind===1">物资损坏</span>
            <span v-else>网络故障</span>
          </template>
        </el-table-column>
        <el-table-column prop="repairReason" label="报修原因"></el-table-column>
        <el-table-column prop="submitDate" label="提交日期"></el-table-column>
        <el-table-column prop="resolvedDate" label="解决日期"></el-table-column>
        <el-table-column prop="buildingNo" label="宿舍楼"></el-table-column>
        <el-table-column prop="dorNo" label="宿舍号"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-check" circle size="mini" v-if="scope.row.status===1"></el-button>
            <el-button type="danger" icon="el-icon-close" circle v-else size="mini"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="checkDetailRepair(scope.row)">详情</el-button>
            <el-button size="mini" type="danger" @click="deleteItem(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="ui-pagination"
        @current-change="changPageNum"
        layout="total, prev, pager, next"
        :current-page="this.repairParams.pageNum"
        :page-size="this.repairParams.pageSize"
        :total="repairTotal">
      </el-pagination>
    </div>

    <div class="ui-list ui-box" slot="list-box" id="ds_box">
      <div class="box-header ui-list-header">
        <div>宿舍服务列表</div>
        <div>
          <el-button type="primary" size="mini" @click="exportDsExcel">导出</el-button>
        </div>
      </div>
      <el-table :data="dsList" :cell-style="cellStyle" @selection-change="handleSelectionChange2"
                :header-cell-style="rowClass" v-loading="tabLoading" >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="dsId" label="宿舍服务号"></el-table-column>
        <el-table-column prop="dsMonth" label="月份"></el-table-column>
        <el-table-column prop="dsElectricBill" label="电费(元)"></el-table-column>
        <el-table-column prop="dsWaterBill" label="水费(元)"></el-table-column>
        <el-table-column prop="dsInternetBill" label="网费(元)"></el-table-column>
        <el-table-column prop="dsDorHygiene" label="宿舍卫生等级">
          <template v-if="scope.row.dsDorHygiene!=null" slot-scope="scope">
            <span v-if="scope.row.dsDorHygiene===1">优</span>
            <span v-if="scope.row.dsDorHygiene===2">良</span>
            <span v-if="scope.row.dsDorHygiene===3">差</span>
          </template>
        </el-table-column>
        <el-table-column prop="dsDorHygieneDetail" label="宿舍卫生情况"></el-table-column>
        <el-table-column prop="buildingNo" label="宿舍楼"></el-table-column>
        <el-table-column prop="dorNo" label="宿舍号"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-check" circle size="mini" v-if="scope.row.status==1"></el-button>
            <el-button type="danger" icon="el-icon-close" circle v-else size="mini"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="checkDetailDs(scope.row)">详情</el-button>
            <el-button size="mini" type="danger" @click="deleteItem(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="ui-pagination"
        @current-change="changPageNum2"
        layout="total, prev, pager, next"
        :current-page="this.dsParams.pageNum"
        :page-size="this.dsParams.pageSize"
        :total="dsTotal">
      </el-pagination>
    </div>

    <el-dialog title="修改密码" :visible.sync="changePwdFlag" width="400px">
      <el-form class="ui-search-form" label-width="120px">
        <el-form-item label="旧密码">
          <el-input size="mini" class="ui-item-reset" v-model="chaPwd.oldPassword"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input size="mini" class="ui-item-reset" v-model="chaPwd.newPassword"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input size="mini" class="ui-item-reset" v-model="chaPwd.confirmNewPassword"
                    placeholder="请再次输入新密码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changePwdFlag = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="changePwd" size="mini">确 定</el-button>
      </div>
    </el-dialog>
    <add-item-repair v-bind:repairItem.sync='repairItem' @submit="addRepair" ref="addItemRepair"></add-item-repair>
    <add-item-ds v-bind:dsItem.sync="dsItem" @submit="addDs" ref="addItemDs"></add-item-ds>
  </div>
</template>
<script>
  import addItemRepair from '@/components/repair/addItem.vue'
  import addItemDs from '@/components/dormitoryService/addItem.vue'

  export default {
    components: {
      addItemRepair, addItemDs
    },
    data() {
      return {
        userInfo: {},
        repairItem: {
          repairId: '',
          repairKind: '',
          repairReason: '',
          buildingNo: '',
          dorNo: ''
        },
        dsItem: {
          dsId: '',
          dsMonth: '',
          dsElectricBill: '',
          dsWaterBill: '',
          dsInternetBill: '',
          dsDorHygiene: '',
          buildingNo: '',
          dorNo: '',
          status: ''
        },
        adminList: [],
        repairList: [],
        dsList: [],
        tabLoading: false,
        repairParams: {
          pageNum: 1,
          pageSize: 10,
        },
        repairTotal: 0,
        dsParams: {
          pageNum: 1,
          pageSize: 10,
        },
        dsTotal: 0,
        changePwdFlag: false,
        chaPwd: {
          confirmNewPassword: '',
          newPassword: '',
          oldPassword: ''
        },
        exportRepairList: [],
        exportDsList:[]
      }
    },
    created() {
      this.getAdmin()
    },
    methods: {
      openRepair() {
        this.$refs.addItemRepair.openWindow('申请报修')
      },
      openDs() {
        this.$refs.addItemDs.openWindow('添加宿舍服务信息')
      },
      addRepair() {
        let dorId = this.repairItem.dorNo
        post('/pms_api/repair/add', {
          'dorId': dorId,
          'repairKind': this.repairItem.repairKind,
          'repairReason': this.repairItem.repairReason
        }).then(res => {
          this.$refs.addItemRepair.addDialogVisible = false;
          this.getAdmin()
          this.tabLoading = false;
        }).catch(err => {
          this.tabLoading = false
          console.log(err)
        })
      },
      addDs() {
        let dorId = this.dsItem.dorNo
        post('/pms_api/dormitoryService/add', {
          'dorId': dorId,
          'dsMonth': this.dsItem.dsMonth,
          'dsElectricBill': this.dsItem.dsElectricBill,
          'dsWaterBill': this.dsItem.dsWaterBill,
          'dsInternetBill': this.dsItem.dsInternetBill,
          'dsDorHygiene': this.dsItem.dsDorHygiene,
        }).then(res => {
          this.$refs.addItemDs.addDialogVisible = false;
          this.getAdmin();
          this.tabLoading = false;
        }).catch(err => {
          this.tabLoading = false
          console.log(err)
        })
      },
      getAdmin() {
        this.userInfo = this.$getGlobal.getItem('userInfo')
        // console.log(this.userInfo)
        post(`/pms_api/admin/detail`, {userId: this.userInfo.userId}).then(res => {
          this.adminList = res.data
          post('/pms_api/repair/list', {
            'pageNum': this.repairParams.pageNum,
            'pageSize': this.repairParams.pageSize,
            'dorId': this.adminList[0].dorId
          }).then(res => {
            this.repairList = res.data
            this.repairTotal = res.totalPages
            this.tabLoading = false
          }).catch(err => {
            this.tabLoading = false
            console.log(err)
          })
          post('/pms_api/dormitoryService/list', {
            'pageNum': this.dsParams.pageNum,
            'pageSize': this.dsParams.pageSize,
            'dorId': this.adminList[0].dorId
          }).then(res => {
            this.dsList = res.data
            this.dsTotal = res.totalPages
            this.tabLoading = false
          }).catch(err => {
            this.tabLoading = false
            console.log(err)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      checkDetail(item) {
        this.$router.push({
          path: '/adminDetail',
          query: {
            title: item.adminName,
            id: item.userId,
            roleId: 2
          }
        })
      },
      checkDetailRepair(item) {
        this.$router.push({
          path: '/repairDetail',
          query: {
            repairId: item.repairId,
            roleId: 2
          }
        })
      },
      checkDetailDs(item) {
        this.$router.push({
          path: '/dormitoryServiceDetail',
          query: {
            dsId: item.dsId,
          }
        })
      },
      changPageNum(val) {
        this.repairParams.pageNum = val
        this.getAdmin()
      },
      changPageNum2(val) {
        this.dsParams.pageNum = val
        this.getAdmin()
      },
      back() {
        console.log(this.$route.query.title);
        this.$router.back(-1)
      },
      editPerson() {
        let users = this.userInfo
        delete users.createTime
        delete users.updateTime
        delete users.lastLoginTime
        delete users.department
        delete users.role
        post(`/pms_api/user/edit`, users).then(res => {
          this.formStatus = !this.formStatus
        }).catch(err => {
          console.log(err)
        })
      },
      openChangePassword() {
        this.changePwdFlag = true;
        this.chaPwd.confirmNewPassword = ''
        this.chaPwd.newPassword = ''
        this.chaPwd.oldPassword = ''
      },
      changePwd() {
        post(`/pms_api/user/changePassword`, this.chaPwd).then(res => {
          this.changePwdFlag = false
        }).catch(err => {
          this.changePwdFlag = false
          console.log(err)
        })
      },
      toDiv(val) {
        window.location.hash = val
      },
      handleSelectionChange1(val) {
        this.exportRepairList = val
      },
      handleSelectionChange2(val) {
        this.exportDsList = val
      },
      exportRepairExcel() {
        let repairKind = {1: '物资损坏', 2: '网络故障'};
        if (this.exportRepairList.length > 0) {
          this.exportRepairList.forEach(item => {
            item.repairKind = repairKind[item.repairKind]
          });
          const tHeader = ['报修单号', '报修种类', '报修原因', '提交日期', '解决日期', '宿舍楼', '宿舍号','状态'];
          const filterVal = ['repairId', 'repairKind', 'repairReason', 'submitDate', 'resolvedDate', 'buildingNo', 'dorNo', 'status'];
          const list = this.exportRepairList;
          this.$getGlobal.exportFun('报修详情', tHeader, filterVal, list);
        } else {
          this.$message.error('请先选择需要导出的列表项');
        }
      },
      exportDsExcel() {
        if (this.exportDsList.length > 0) {
          const tHeader = ['宿舍服务号', '水费', '电费', '网费', '宿舍卫生情况','月份','宿舍楼', '宿舍号','状态'];
          const filterVal = ['dsId', 'dsWaterBill', 'dsElectricBill', 'dsInternetBill', 'dsDorHygiene', 'dsMonth','buildingNo', 'dorNo', 'status'];
          const list = this.exportDsList;
          this.$getGlobal.exportFun('宿舍服务详情', tHeader, filterVal, list);
        } else {
          this.$message.error('请先选择需要导出的列表项');
        }
      },
      //表格居中
      cellStyle({row, colum, rowIndex, columIndex}) {
        return "text-align: center";
      },
      rowClass({row, rowIndex}) {
        return "text-align: center";
      }
    }
  }
</script>
